/*
 * Created by haozhicao@tencent.com on 6/28/22.
 * td_loading_page.dart
 * 
 */

import 'package:flutter/material.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import '../../base/example_widget.dart';
import '../annotation/demo.dart';

class TDLoadingPage extends StatefulWidget {
  const TDLoadingPage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _TDLoadingPageState();
}

class _TDLoadingPageState extends State<TDLoadingPage> {
  @override
  Widget build(BuildContext context) {
    return ExamplePage(
      title: tdTitle(),
      exampleCodeGroup: 'loading',
      desc: '用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。',
      children: [
        ExampleModule(title: '组件类型', children: [
          ExampleItem(desc: '纯图标', builder: _buildPureIconLoading),
          ExampleItem(
              desc: '图标加文字横向', builder: _buildTextIconHorizontalLoading),
          ExampleItem(desc: '图标加文字竖向', builder: _buildTextIconVerticalLoading),
          ExampleItem(desc: '纯文字', builder: _buildPureTextLoading),
        ]),
        ExampleModule(title: '组件尺寸', children: [
          ExampleItem(desc: '大尺寸', builder: _buildLargeLoading),
          ExampleItem(desc: '中尺寸', builder: _buildMediumLoading),
          ExampleItem(desc: '小尺寸', builder: _buildSmallLoading),
        ]),
        ExampleModule(title: '加载速度', children: [
          ExampleItem(desc: '调整加载速度', builder: _buildCustomSpeedLoading),
        ]),
      ],
      test: [
        ExampleItem(
            desc: '带图标的失败横向Loading',
            ignoreCode: true,
            builder: (_) {
              return Padding(
                padding: const EdgeInsets.all(16),
                child: TDLoading(
                  icon: TDLoadingIcon.circle,
                  size: TDLoadingSize.small,
                  axis: Axis.horizontal,
                  text: '加载失败',
                  refreshWidget: GestureDetector(
                    child: TDText(
                      '刷新',
                      font: TDTheme.of(context).fontBodySmall,
                      textColor: TDTheme.of(context).brandNormalColor,
                    ),
                    onTap: () {
                      TDToast.showText('刷新', context: context);
                    },
                  ),
                ),
              );
            }),
        ExampleItem(
            desc: '带图标的失败竖向Loading',
            ignoreCode: true,
            builder: (_) {
              return Container(
                padding: const EdgeInsets.all(16),
                child: TDLoading(
                  icon: TDLoadingIcon.circle,
                  size: TDLoadingSize.small,
                  text: '加载失败',
                  refreshWidget: GestureDetector(
                    child: TDText(
                      '刷新',
                      font: TDTheme.of(context).fontBodySmall,
                      textColor: TDTheme.of(context).brandNormalColor,
                    ),
                    onTap: () {
                      TDToast.showText('刷新', context: context);
                    },
                  ),
                ),
              );
            }),
        ExampleItem(
            desc: '验证居中问题',
            ignoreCode: true,
            builder: (_) {
              return const Row(
                  // spacing: 36,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    TDLoading(
                      size: TDLoadingSize.large,
                      icon: TDLoadingIcon.circle,
                      text: '加载中…',
                      axis: Axis.vertical,
                    ),
                    SizedBox(width: 36),
                    TDLoading(
                      size: TDLoadingSize.large,
                      icon: TDLoadingIcon.activity,
                      text: '加载中…',
                      axis: Axis.vertical,
                    ),
                  ]);
            }),
        ExampleItem(
            desc: '展示/隐藏Loading',
            ignoreCode: true,
            builder: (_) {
              return Row(
                // spacing: 36,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TDButton(
                    text: '展示Loading',
                    theme: TDButtonTheme.primary,
                    onTap: () {
                      TDLoadingController.show(context);
                    },
                  ),
                  const SizedBox(width: 36),
                  const TDButton(
                    text: '隐藏Loading',
                    theme: TDButtonTheme.primary,
                    onTap: TDLoadingController.dismiss,
                  ),
                ],
              );
            })
      ],
    );
  }

  /// 纯图标
  @Demo(group: 'loading')
  Widget _buildPureIconLoading(BuildContext context) {
    return Row(
      // spacing: 36,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const TDLoading(
          size: TDLoadingSize.small,
          icon: TDLoadingIcon.circle,
        ),
        const SizedBox(width: 36),
        const TDLoading(
          size: TDLoadingSize.small,
          icon: TDLoadingIcon.activity,
        ),
        const SizedBox(width: 36),
        TDLoading(
          size: TDLoadingSize.small,
          icon: TDLoadingIcon.point,
          iconColor: TDTheme.of(context).brandNormalColor,
        ),
      ],
    );
  }

  /// 图标加文字横向
  @Demo(group: 'loading')
  Widget _buildTextIconHorizontalLoading(BuildContext context) {
    return const Row(
      // spacing: 36,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TDLoading(
          size: TDLoadingSize.small,
          icon: TDLoadingIcon.circle,
          text: '加载中…',
          axis: Axis.horizontal,
        ),
        const SizedBox(width: 36),
        TDLoading(
          size: TDLoadingSize.small,
          icon: TDLoadingIcon.activity,
          text: '加载中…',
          axis: Axis.horizontal,
        ),
      ],
    );
  }

  /// 图标加文字竖向
  @Demo(group: 'loading')
  Widget _buildTextIconVerticalLoading(BuildContext context) {
    return const Row(
      // spacing: 36,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TDLoading(
          size: TDLoadingSize.small,
          icon: TDLoadingIcon.circle,
          text: '加载中…',
          axis: Axis.vertical,
        ),
        SizedBox(width: 36),
        TDLoading(
          size: TDLoadingSize.small,
          icon: TDLoadingIcon.activity,
          text: '加载中…',
          axis: Axis.vertical,
        ),
      ],
    );
  }

  /// 纯文字
  @Demo(group: 'loading')
  Widget _buildPureTextLoading(BuildContext context) {
    return Row(
      // spacing: 36,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const TDLoading(
          size: TDLoadingSize.small,
          text: '加载中…',
        ),
        const SizedBox(width: 36),
        TDLoading(
          size: TDLoadingSize.small,
          text: '加载失败',
          textColor: TDTheme.of(context).textColorPlaceholder,
        ),
        const SizedBox(width: 36),
        TDLoading(
          size: TDLoadingSize.small,
          text: '加载失败',
          refreshWidget: GestureDetector(
            child: TDText(
              '刷新',
              font: TDTheme.of(context).fontBodySmall,
              textColor: TDTheme.of(context).brandNormalColor,
            ),
            onTap: () {
              TDToast.showText('刷新', context: context);
            },
          ),
        ),
      ],
    );
  }

  /// 大尺寸
  @Demo(group: 'loading')
  Widget _buildLargeLoading(BuildContext context) {
    return const TDLoading(
      size: TDLoadingSize.large,
      icon: TDLoadingIcon.circle,
      text: '加载中…',
      axis: Axis.horizontal,
    );
  }

  /// 中尺寸
  @Demo(group: 'loading')
  Widget _buildMediumLoading(BuildContext context) {
    return const TDLoading(
      size: TDLoadingSize.medium,
      icon: TDLoadingIcon.circle,
      text: '加载中…',
      axis: Axis.horizontal,
    );
  }

  /// 小尺寸
  @Demo(group: 'loading')
  Widget _buildSmallLoading(BuildContext context) {
    return const TDLoading(
      size: TDLoadingSize.small,
      icon: TDLoadingIcon.circle,
      text: '加载中…',
      axis: Axis.horizontal,
    );
  }

  double _currentSliderValue = 1000;

  /// 自定义尺寸
  @Demo(group: 'loading')
  Widget _buildCustomSpeedLoading(BuildContext context) {
    return Column(
      // spacing: 16,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        TDLoading(
          size: TDLoadingSize.small,
          icon: TDLoadingIcon.circle,
          axis: Axis.horizontal,
          text: '加载中…',
          duration: _currentSliderValue.round(),
        ),
        const SizedBox(height: 16),
        TDSlider(
          value: _currentSliderValue,
          sliderThemeData: TDSliderThemeData(
            context: context,
            max: 2000,
            min: -20,
            divisions: 100,
            showThumbValue: true,
            scaleFormatter: (value) => value.toInt().toString(),
          ),
          onChanged: (double value) {
            setState(() {
              _currentSliderValue = value;
            });
          },
        )
      ],
    );
  }
}
